import React, { Component } from 'react';
import { Text, TouchableOpacity, Dimensions } from 'react-native';
import styled from 'styled-components';
import { connect } from 'react-redux';
import StepIndicator from 'react-native-step-indicator';
import DeviceInfo from 'react-native-device-info';
import RotateCircle from './RotateCircle';
import { fetchAlarmType, startAlarm, fetchAlarmTypeDesc } from '../../api';
import { getToken } from '../../utils/auth';

class Alarm extends Component {
  state = {
    currentPosition: 0,
    typeConfig: [],
    typeDesc: []
  };

  componentDidMount() {
    const { policeBaseInfoVo } = this.props;

    console.log('----------', policeBaseInfoVo.cusNumber);
    getToken().then(token => {
      fetchAlarmType(token, policeBaseInfoVo.cusNumber)
        .then(types => {
          const data = types.data.map((item, index) => {
            item.active = false;
            return item;
          });

          this.setState({
            typeConfig: data
          });
        })
        .catch(err => console.log('请求报警类型异常', err));
    });
  }

  callAlarm = async (typeId, typeName) => {
    const { policeBaseInfoVo } = this.props;
    const record = {
      reportDate: new Date(), // 上报时间
      reportDept: policeBaseInfoVo.deptId, // 上报部门
      reportIp: '', // 上报IP地址
      reportMac: '', // mac地址
      reportPolice: policeBaseInfoVo.policeCode, // 上报民警
      reportType: typeId, // 上报类型
      reportTypeName: typeName // 上报类型名称
    };
    console.log('record: 1111', JSON.stringify(record, 0, 4));

    // await console.log('api版本:', DeviceInfo.getAPILevel()());
    // await DeviceInfo.getIPAddress().then(res => {
    //   console.log('设备当前网络地址IP:', res);
    // });
    // await DeviceInfo.getMACAddress().then(res => {
    //   console.log('网络适配器MAC地址:', res);
    // });

    // 类型描述
    getToken().then(token => {
      fetchAlarmTypeDesc(token, typeId).then(res => {
        console.log('---', res);
        this.setState({
          typeDesc: res.data
        });
      });
    });

    // 调用接口

    getToken().then(token => {
      startAlarm(token, record).then(res => {
        console.log('报警', res);
      });
    });
  };

  render() {
    const screenWidth = Dimensions.get('window').width;
    const { typeDesc } = this.state;

    console.log('typeDesc: ', typeDesc);

    const customStyles = {
      stepIndicatorSize: 8,
      currentStepIndicatorSize: 8,
      separatorStrokeWidth: 2,
      currentStepStrokeWidth: 3,
      stepStrokeCurrentColor: '#fe7013',
      stepStrokeWidth: 3,
      stepStrokeFinishedColor: '#fe7013',
      stepStrokeUnFinishedColor: '#fe7013',
      separatorFinishedColor: '#fe7013',
      separatorUnFinishedColor: '#fe7013',
      stepIndicatorFinishedColor: '#fe7013',
      stepIndicatorUnFinishedColor: '#fe7013',
      stepIndicatorCurrentColor: '#fe7013',
      stepIndicatorLabelFontSize: 13,
      currentStepIndicatorLabelFontSize: 13,
      stepIndicatorLabelCurrentColor: '#fe7013',
      stepIndicatorLabelFinishedColor: '#fe7013',
      stepIndicatorLabelUnFinishedColor: '#fe7013',
      labelColor: '#333333',
      labelSize: 14,
      currentStepLabelColor: '#333333'
    };

    return (
      <Container>
        <AlarmHeader>
          <RotateCircle />
        </AlarmHeader>
        <AlarmType>
          {this.state.typeConfig.map((item, index, self) => (
            <TypeTouchable
              key={item.id}
              onPress={() => {
                // 获取副本并设置 active: false
                const copy = self.map(d => {
                  d.active = false;
                  return d;
                });
                // 当前点击项 avtive: true
                copy.find(i =>
                  i.prcName === item.prcName
                    ? (i.active = true)
                    : (i.active = false)
                );
                this.setState({
                  typeConfig: copy
                });
                this.callAlarm(item.prcId, item.prcName);
              }}>
              <AlarmTypeImage
                source={
                  item.active
                    ? require('../../assets/alarm/alarmtype_active.png')
                    : require('../../assets/alarm/alarmtype.png')
                }
              />
              <AlarmTypeText
                style={{ color: item.active ? 'white' : '#FB871D' }}>
                {item.prcName}
              </AlarmTypeText>
            </TypeTouchable>
          ))}
        </AlarmType>
        <AlarmAction>
          {typeDesc.length ? (
            <StepIndicator
              stepCount={typeDesc.length}
              direction="vertical"
              customStyles={customStyles}
              currentPosition={this.state.currentPosition}
              labels={typeDesc}
              renderLabel={(position, stepStatus, label, currentPosition) => {
                return (
                  <Text
                    style={{
                      width: screenWidth - 36,
                      color: '#333',
                      fontSize: 14,
                      position: 'absolute',
                      left: 10
                    }}>
                    {position.label.desc}
                  </Text>
                );
              }}
            />
          ) : (
            <Text>''</Text>
          )}
        </AlarmAction>
      </Container>
    );
  }
}

const mapStateToProps = ({ user: { policeBaseInfoVo } }) => {
  return {
    policeBaseInfoVo
  };
};

export default connect(mapStateToProps)(Alarm);

const Container = styled.View`
  width: 100%;
  height: 100%;
  padding-left: 14;
  padding-right: 14;
  background-color: white;
`;

const AlarmHeader = styled.View`
  flex: 2;
  background-color: white;
`;

const AlarmType = styled.View`
  flex: 1;
  flex-direction: row;
  background-color: white;
  justify-content: space-around;
  align-items: center;
`;
const TypeTouchable = styled(TouchableOpacity)`
  width: 65;
  height: 65;
  justify-content: center;
  align-items: center;
`;
const AlarmTypeImage = styled.Image`
  position: absolute;
  width: 65;
  height: 65;
`;
const AlarmTypeText = styled.Text`
  width: 30;
  font-size: 13px;
  color: white;
`;

const AlarmAction = styled.View`
  flex: 3;
  background-color: white;
`;
